<template>
  <div class="new-task-panel">
    <div class="panel-header">
      <h3 class="panel-title">新建任务</h3>
    </div>
    <div class="panel-content">
      <!-- 计划名称 -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">计划名称:</div>
          <!-- 输入框 -->
          <div class="plan-name-input-wrapper">
            <el-input
              v-model="planName"
              type="text"
              placeholder="请输入计划名称"
            />
          </div>
        </div>
      </div>
      <!-- 任务类型 -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">任务类型:</div>
          <!-- 输入框 -->
          <div class="task-type-select-wrapper">
            <el-select
              v-model="taskType"
              placeholder="请选择任务类型"
            >
              <el-option
                v-for="item in taskTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
      <!-- 执行设备 -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">执行设备:</div>
        </div>
        <!-- 内容模块 -->
        <div class="content-item-content">
          <!-- 设备列表 -->
          <div class="device-list-container">
            <div 
              v-for="item in deviceList" 
              :key="item.id" 
              class="device-list-item"
              :class="{ 
                selected: selectedDevice?.id === item.id,
                offline: item.status === 'offline'
              }"
              @click="selectDevice(item)"
            >
              <!-- 设备图片 -->
              <div class="device-list-item-img">
                <img :src="deviceUAVImage" alt="设备图片" />
              </div>
              <!-- 设备名称 -->
              <div class="device-list-item-info">
                <div class="device-name">{{ item.name }}</div>
                <div class="device-status">
                  <img class="device-status-img" :src="getStatusIcon(item.status)" alt="设备状态" />
                  <div class="device-status-text">{{ item.statusText }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 执行航线 -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">执行航线：</div>
          <!-- 选择航线按钮 -->
          <div class="select-route-btn" @click="selectRoute">
            <div class="select-route-btn-text">选择航线</div>
            <img class="select-route-btn-icon" :src="iconArrowRight" alt="选择航线" />
          </div>
        </div>
        <!-- 内容模块 -->
        <div class="content-item-content">
          <div class="select-route-content">
            <div class="select-route-name">{{ selectedRouteName || '请选择航线' }}</div>
          </div>
        </div>
      </div>
      <!-- 航线精度 -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">航线精度:<img class="tip-icon" :src="tipIcon" /></div>
        </div>
        <!-- 内容模块 -->
        <div class="content-item-content">
          <div class="accuracy-type-container">
            <div 
              class="accuracy-type-item"
              :class="{ active: selectedAccuracyType === 'gps' }"
              @click="selectAccuracyType('gps')"
            >
              <div class="accuracy-type-item-text">GPS任务</div>
            </div>
            <div 
              class="accuracy-type-item"
              :class="{ active: selectedAccuracyType === 'rtk' }"
              @click="selectAccuracyType('rtk')"
            >
              <div class="accuracy-type-item-text">高精度RTK任务</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 相对机场返航高度 (ALT) -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">相对机场返航高度 (ALT):</div>
        </div>
        <!-- 内容模块 -->
        <div class="content-item-content">
          <div class="alt-container">
            <!-- 图片 -->
            <img class="alt-img" :src="altImg" alt="相对机场返航高度 (ALT)" />
            <!-- 设置 -->
            <div class="alt-setting">
              <div class="alt-grid">
                <!-- 第一行 -->
                <div class="grid-row">
                  <div 
                    class="grid-item operator"
                    :class="{ active: selectedOperator === 'add' }"
                    @click="selectOperator('add')"
                  >
                    +
                  </div>
                  <div class="grid-item empty"></div>
                  <div 
                    class="grid-item number"
                    @click="changeValue(30)"
                  >
                    30
                  </div>
                </div>
                <!-- 第二行 -->
                <div class="grid-row">
                  <div class="grid-item input-wrapper">
                    <input 
                      type="text" 
                      v-model="altValue"
                      class="alt-input"
                      readonly
                    />
                  </div>
                  <div class="grid-item unit">m</div>
                  <div 
                    class="grid-item number"
                    @click="changeValue(50)"
                  >
                    50
                  </div>
                </div>
                <!-- 第三行 -->
                <div class="grid-row">
                  <div 
                    class="grid-item operator"
                    :class="{ active: selectedOperator === 'minus' }"
                    @click="selectOperator('minus')"
                  >
                    -
                  </div>
                  <div class="grid-item empty"></div>
                  <div 
                    class="grid-item number"
                    @click="changeValue(100)"
                  >
                    100
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 航线飞行中失联 -->
      <div class="content-item">
        <!-- 标题模块 -->
        <div class="content-item-title">
          <div class="content-item-title-text">航线飞行中失联:</div>
        </div>
        <!-- 内容模块 -->
        <div class="content-item-content">
          <div class="outof-contact-setting-container">
            <div 
              class="outof-contact-setting-item"
              :class="{ active: selectedOutofContactSetting === 'return' }"
              @click="selectOutofContactSetting('return')"
            >
              <div class="outof-contact-setting-item-text">返 航</div>
            </div>
            <div 
              class="outof-contact-setting-item"
              :class="{ active: selectedOutofContactSetting === 'continue' }"
              @click="selectOutofContactSetting('continue')"
            >
              <div class="outof-contact-setting-item-text">持续执行</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部操作按钮模块 -->
      <div class="bottom-operation-container">
        <div class="bottom-operation-btn cancel-btn">取 消</div>
        <div class="bottom-operation-btn confirm-btn">确 定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineExpose } from 'vue'

// 定义 emits
const emit = defineEmits(['show-search-device', 'show-select-route'])
import iconStatusPoint from '@/assets/icons/icon_status_point.png' // 设备状态图标
import iconStatusPointOffline from '@/assets/icons/icon_status_point_offline.png' // 设备状态图标-关机
import iconArrowRight from '@/assets/icons/icon_select_route_arrow_right.png' // 选择航线右箭头
import tipIcon from '@/assets/icons/icon_tip.png' // 问号图标
import altImg from '@/assets/images/add_task_alt_image.png' // 相对机场返航高度 (ALT)

const deviceUAVImage = ref('https://s21.ax1x.com/2025/07/13/pVlfgAJ.png') // 执行设备里用到的图片

// 计划名称
const planName = ref('')

// 任务类型
const taskType = ref('')

// 任务类型选项
const taskTypeOptions = [
  {
    value: 'inspection',
    label: '巡检任务'
  },
  {
    value: 'monitoring',
    label: '实时监控'
  },
  {
    value: 'mapping',
    label: '测绘任务'
  },
  {
    value: 'patrol',
    label: '定期巡航'
  },
  {
    value: 'emergency',
    label: '应急响应'
  },
  {
    value: 'delivery',
    label: '物资投送'
  }
]

// 设备列表数据
const deviceList = ref([
  {
    id: 1,
    name: 'DJI Flip 畅飞套装',
    statusText: '空闲中',
    status: 'idle'
  },
  {
    id: 2,
    name: 'DJI Air 3S 畅飞套装',
    statusText: '空闲中',
    status: 'idle'
  },
  {
    id: 3,
    name: '设备名称 001',
    statusText: '关机',
    status: 'offline'
  },
  {
    id: 4,
    name: '设备名称 002',
    statusText: '空闲中',
    status: 'idle'
  }
])

// 选中的设备
const selectedDevice = ref(null)

// 选择设备
const selectDevice = (device) => {
  // 如果设备是离线状态，不允许选择
  if (device.status === 'offline') {
    console.log('设备离线，无法选择')
    return
  }
  
  // 如果点击已选中的设备，则取消选择
  if (selectedDevice.value?.id === device.id) {
    selectedDevice.value = null
    console.log('取消选择设备')
  } else {
    selectedDevice.value = device
    console.log('选择设备:', device.name)
    // 点击设备时显示搜索面板
    emit('show-search-device')
  }
}

// 获取设备状态图标
const getStatusIcon = (status) => {
  if (status === 'offline') {
    return iconStatusPointOffline
  }
  return iconStatusPoint
}

// 选中的航线
const selectedRoute = ref(null)

// 选中的航线名称计算属性
const selectedRouteName = computed(() => selectedRoute.value?.name || '')

// 选择航线
const selectRoute = () => {
  console.log('打开选择航线面板')
  emit('show-select-route')
}

// 接收选中的航线
const handleRouteSelected = (route) => {
  selectedRoute.value = route
  console.log('已选择航线:', route.name)
}

// 暴露给父组件
defineExpose({
  handleRouteSelected
})

// 选中的精度类型
const selectedAccuracyType = ref('gps') // 默认选中GPS任务

// 选择精度类型
const selectAccuracyType = (type) => {
  selectedAccuracyType.value = type
  console.log('选择精度类型:', type === 'gps' ? 'GPS任务' : '高精度RTK任务')
}

// 选中的失联设置
const selectedOutofContactSetting = ref('return') // 默认选中返航

// 选择失联设置
const selectOutofContactSetting = (setting) => {
  selectedOutofContactSetting.value = setting
  console.log('航线飞行中失联设置:', setting === 'return' ? '返航' : '持续执行')
}

// 相对机场返航高度
const altValue = ref('120')
const selectedOperator = ref('add') // 默认选中加号

// 选择操作符
const selectOperator = (operator) => {
  selectedOperator.value = operator
  console.log('选择操作符:', operator === 'add' ? '加' : '减')
}

// 改变数值
const changeValue = (value) => {
  const currentValue = parseInt(altValue.value) || 0
  if (selectedOperator.value === 'add') {
    altValue.value = String(currentValue + value)
  } else {
    const newValue = currentValue - value
    // 确保高度不小于0
    altValue.value = String(Math.max(0, newValue))
  }
  console.log('相对机场返航高度:', altValue.value + 'm')
}
</script>

<style lang="scss" scoped>
// 引入 Element Plus 组件样式覆盖
@import '@/style/element-overrides.scss';

.new-task-panel {
  width: 404px;
  height: 903px;
  background: url('@/assets/images/add_task_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    max-height: 865px;
    overflow-y: auto;
    padding: 30px 16px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;

    // 滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 2.5px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2.5px;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }

    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    
    .content-item {
      margin-bottom: 16px;
      
      .content-item-title {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .content-item-title-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
          .tip-icon {
            width: 12px;
            height: 12px;
            margin-left: 5px;
            position: relative;
            bottom: -1px;
            cursor: pointer;
          }
        }
      }
      
      .content-item-content {
        margin-top: 12px;
      }
      
      // 计划名称
      .plan-name-input-wrapper {
        width: 292px;
      }
      // 任务类型
      .task-type-select-wrapper {
        width: 292px;
      }

      // 执行设备
      .device-list-container {
        .device-list-item {
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 100px;
          padding: 8px;
          box-sizing: border-box;
          background: rgba(2, 92, 109, 0.3);
          backdrop-filter: blur(6px);
          cursor: pointer;
          transition: all 0.3s ease;
          
          & + .device-list-item {
            margin-top: 8px;
          }
          
          &:hover:not(.offline) {
            background: rgba(2, 92, 109, 0.5);
          }
          
          &.selected {
            box-shadow: inset 0px 0px 6px 1px rgba(0, 255, 244, 0.7);
          }
          .device-list-item-img {
            width: 84px;
            height: 84px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .device-list-item-info {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            align-items: flex-start;
            align-self: stretch;
            padding: 10px 0;
            box-sizing: border-box;
            .device-name {
              font-size: 16px;
              font-weight: 900;
              letter-spacing: 0px;
              line-height: 14px;
              color: rgba(255, 255, 255, 1);
            }
            .device-status {
              display: flex;
              flex-flow: row nowrap;
              justify-content: flex-start;
              align-items: center;
              .device-status-img {
                width: 12px;
                height: 12px;
                margin-right: 7px;
              }
              .device-status-text {
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 22px;
                color: rgba(255, 255, 255, 1);
              }
            }
          }
        }
      }

      // 选择航线按钮
      .select-route-btn {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;
        .select-route-btn-text {
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(0, 255, 244, 1);
          margin-right: 7px;
        }
        .select-route-btn-icon {
          width: 14px;
          height: 14px;
        }
      }

      // 选择航线内容-选中的航线
      .select-route-content {
        width: 372px;
        padding: 16px;
        box-sizing: border-box;
        background: rgba(2, 92, 109, 0.3);
        backdrop-filter: blur(6px);
        .select-route-name {
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(0, 255, 244, 1);
        }
      }

      // 航线精度按钮容器
      .accuracy-type-container {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        
        .accuracy-type-item {
          width: 153px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          border: 2px solid rgba(20, 109, 142, 1);
          cursor: pointer;
          transition: all 0.3s ease;

          & + .accuracy-type-item {
            margin-left: 9px;
          }
          .accuracy-type-item-text {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 14px;
            color: rgba(255, 255, 255, 1);
            transition: color 0.3s ease;
          }
          
          &:hover {
            border-color: rgba(25, 167, 181, 0.8);
          }
          
          &.active {
            background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
            border-color: rgba(25, 167, 181, 1);
          }
        }
      }

      // 相对机场返航高度 (ALT)
      .alt-container {
        .alt-img {
          width: 234px;
          height: auto;
          margin-left: 5px;
          margin-bottom: 16px;
        }
        
        .alt-setting {
          display: flex;
          justify-content: center;
          
          .alt-grid {
            display: flex;
            flex-direction: column;
            gap: 14px;
            
            .grid-row {
              display: flex;
              gap: 6px;
              
              .grid-item {
                width: 60px;
                height: 32px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                border: 1px solid rgba(30, 133, 153, 1);
                border-radius: 2px;
                cursor: pointer;
                transition: all 0.3s ease;
                
                // 操作符样式
                &.operator {
                  font-size: 14px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  line-height: 22px;
                  color: rgba(0, 255, 244, 1);
                  border: 1px solid rgba(175, 215, 230, 0.5);
                  
                  &:hover {
                    background: rgba(2, 92, 109, 0.7);
                    border-color: rgba(0, 255, 255, 0.5);
                  }
                  
                  &.active {
                    background: rgba(0, 255, 255, 0.2);
                    border-color: #00ffff;
                    color: #00ffff;
                    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
                  }
                }
                
                // 数字按钮样式
                &.number {
                  font-size: 14px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  line-height: 22px;
                  color: rgba(0, 255, 244, 1);
                  
                  &:hover {
                    background: rgba(2, 92, 109, 0.7);
                    border-color: rgba(0, 255, 255, 0.5);
                  }
                }
                
                // 输入框样式
                &.input-wrapper {
                  cursor: default;
                  
                  .alt-input {
                    width: 100%;
                    height: 100%;
                    background: transparent;
                    border: none;
                    outline: none;
                    font-size: 14px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 22px;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                  }
                }
                
                // 单位样式
                &.unit {
                  font-size: 14px;
                  font-weight: 400;
                  letter-spacing: 0px;
                  line-height: 22px;
                  color: rgba(0, 255, 244, 1);
                  cursor: default;
                  border: none;
                }
                
                // 空格子样式
                &.empty {
                  cursor: default;
                  background: transparent;
                  border: none;
                }
              }
            }
          }
        }
      } 

      // 航线飞行中失联
      .outof-contact-setting-container {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        
        .outof-contact-setting-item {
          width: 153px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          border: 2px solid rgba(20, 109, 142, 1);
          cursor: pointer;
          transition: all 0.3s ease;

          & + .outof-contact-setting-item {
            margin-left: 9px;
          }
          .outof-contact-setting-item-text {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 14px;
            color: rgba(255, 255, 255, 1);
            transition: color 0.3s ease;
          }
          
          &:hover {
            border-color: rgba(25, 167, 181, 0.8);
          }
          
          &.active {
            background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
            border-color: rgba(25, 167, 181, 1);
          }
        }
      }
    }

    // 底部操作按钮模块
    .bottom-operation-container {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      margin-top: 120px;
      .bottom-operation-btn {
        width: 78px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 14px;
        color: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 2px solid rgba(20, 109, 142, 1);
        cursor: pointer;
        transition: all 0.3s ease;
        & + .bottom-operation-btn {
          margin-left: 16px;
        }
        &.cancel-btn {
          background: transparent;
          &:hover {
            border-color: rgba(25, 167, 181, 0.8);
          }
        }
        &.confirm-btn {
          background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
        }
      }
    }
  }
}
</style>